<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>CSS 涡旋</title>

		<style>
			body {
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				background-color: #223;
			}
			
			.wrapper {
				position: absolute;
				display: block;
				width: 500px;
				height: 500px;
				margin: calc(50vh - 250px) calc(50vw - 250px);
				transition: 2s ease;
				cursor: pointer;
			}
			
			.wrapper:hover {
				transform: scale(1.2);
			}
			
			.arc:before,
			.arc:after {
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				border: 4px solid #000;
				top: -4px;
				left: -4px;
				border-color: hsl(160, 70%, 50%) transparent transparent transparent;
				border-radius: 50%;
				z-index: -8;
				content: "";
			}
			
			.arc:after {
				border-color: transparent transparent hsl(345, 70%, 50%) transparent;
			}
			
			.arc {
				position: absolute;
				display: block;
				width: 85%;
				height: 85%;
				margin: 7.5%;
				border-radius: 50%;
				animation: 15s rotate linear infinite;
				box-shadow: 0px 0px 0px 2px #fff2;
			}
			
			@keyframes rotate {
				0% {
					transform: rotate(90deg);
				}
				100% {
					transform: rotate(810deg);
				}
			}
		</style>

	</head>

	<body>

		<div class="wrapper">
			<div class="arc">
				<div class="arc">
					<div class="arc">
						<div class="arc">
							<div class="arc">
								<div class="arc">
									<div class="arc">
										<div class="arc">
											<div class="arc">
												<div class="arc">
													<div class="arc">
														<div class="arc">
															<div class="arc">
																<div class="arc">
																	<div class="arc">
																		<div class="arc"></div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>